<template>
	<view>
		<!--  -->
		<view class="top">
			<!-- #ifdef MP || APP-PLUS -->
			<view class="sys-head">
				<view class="sys-bar" :style="{height:sysHeight}"></view>
				<!-- #ifdef MP -->
				<view class="sys-title">
					<navigator style="display: flex;align-items: center;justify-content: center;" open-type="navigateBack" delta='1'><image  src="../../../static/images/backnav.png" mode=""></image></navigator><text>开票中心</text>
					</view>
				<!-- #endif -->
				<view class="bg"></view>
			</view>
			<!-- #endif -->
		</view>
		<scroll-view scroll-y="true" :style="{height:scrollBoxHeight}" id="scrollBox" >
			<view class="listbox" >
				<view class="klistitem" v-for="(item,index) of invoiceList" :key="index">
					<view class="ktitle">
						<text class="chb"></text>
						<text class="storeis">{{item.module_type==1?'线上':'门店'}}-</text>
						<text class="ziti">自提</text>
						<text class="time">{{item._pay_time}}</text>
					</view>
					<view class="prolist">
						<view class="proitem" v-for="(its,ids) of item.cartInfo" :key="ids">
							<image class="proinfoimg" :src="its.image" mode=""></image>
							<view class="proright">
									<view class="proinfoleft">
											<view class="title">
												{{its.title}}
											</view>
											<view class="sku">
												粉黛佳人-A系列
											</view>
									</view>
									<view class="proinforight">
										x1
									</view>
							</view>
						</view>
					</view>
					<view class="protal">
						<view class="proi">
							<view class="proprice">
								￥{{item.total_price}}
							</view>
							<view class="protitle">
								微信支付
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="evtbottom">
				<view class="btns">
					<view class="btn-item">
						开票记录
					</view>
					<view class="btn-item">
						开票说明
					</view>
				</view>
				<view class="eventbom">
					<view class="chball">
						<view class="chbcon">
							<view class="chb">
								
							</view>
							<text class="qx">全选</text>
						</view>
						<view class="priceall">
							<text>开票金额</text>
							<text class="priceallprice">￥1234.234</text>
						</view>
					</view>
					<view class="btnnext" @click="jumpkaipiao">
						下一步
					</view>
				</view>
			</view>
			</scroll-view>
		
	</view>
</template>

<script>
	import {
		invoiceorderlist
	} from '@/api/user.js'; 
	
	let sysHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
	export default {
		data() {
			return {
				
				sysHeight: sysHeight,
				scrollBoxHeight:0,
				invoiceList:[]
			}
		},
		onLoad() {
			uni.setNavigationBarColor({
				 frontColor: '#ffffff',
				 backgroundColor: '#C7ED67'
			})
			this.getinvoiceorderlist()
		},
		onReady() {
			let self = this
			// #ifdef MP
			let info = uni.createSelectorQuery().select(".sys-head");
			info.boundingClientRect(function(data) { //data - 各种参数
				self.mpHeight = data.height
			}).exec()
			// #endif
			
			var systemHeight = uni.getSystemInfoSync().windowHeight
			uni.createSelectorQuery().select('#scrollBox').boundingClientRect((rect) => {
				var top = systemHeight - rect.top
				this.scrollBoxHeight = top + 'px'
			}).exec()
		},
		methods: {
			// 获取可开票列表
			async getinvoiceorderlist(){
				var data = {
					page:1,
					limit:20
				}
				var res = await invoiceorderlist(data)
				this.invoiceList = res.data
				console.log(res)
			},
			jumpkaipiao(){
				console.log(23)
				uni.navigateTo({
					url:'/pages/users/user_app_kaipiao/index'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.sys-head {
		position: relative;
		width: 100%;
		// background: linear-gradient(90deg, $bg-star1 0%, $bg-end1 100%);
	
		.bg {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background: url("~@/static/images/home_bg.png") no-repeat;
			background-size: 100% 100%;
			background-position: left bottom;
		}
	
		.sys-title {
			z-index: 10;
			position: relative;
			height: 43px;
			text-align: center;
			line-height: 43px;
			font-size: 36rpx;
			color: #FFFFFF;
			display:flex;
			align-items: center;
			image{
				width:45rpx;
				height:38rpx;
				margin-right:18rpx;
				margin-left:30rpx;
			}
		}
	}
  .listbox{
	  .klistitem{
		  width:710rpx;
		  margin:auto;
		  box-sizing: border-box;
		  background-color:#fff;
		  min-height:300rpx;
		  margin-top:28rpx;
		  padding:17rpx;
		  padding-top:20rpx;
		  .ktitle{
			  display:flex;
			  align-items: center;
			  font-size:28rpx;
			  .storeis{
				  font-size: 28rpx;
				  font-weight: 500;
				  color: #333333;
			  }
			  .ziti{
				  color:#BEDA84;
			  }
			  .time{
				  font-size: 22rpx;
				  font-weight: 300;
				  color: #666666;
				  padding-left:20rpx;
				  line-height:30rpx;
				  
			  }
		  }
		  .prolist{
			  margin-top:54rpx;
			 .proitem{
				 margin-bottom:17rpx;
				 display:flex;
				 // justify-content: space-between;
				 .proinfoimg{
					 margin-right:22rpx;
					 width: 175rpx;
					 height: 175rpx;
					 border-radius: 9rpx;
				 }
				 .proright{
					 display:flex;
					 justify-content: space-between;
					 width:calc(100% - 175rpx - 22rpx);
					 .proinfoleft{
						 
						 .title{
							 width:350rpx;
							 margin-top:20rpx;
							 font-size: 26rpx;
							 font-weight: 300;
							 color: #000000;
						 }
						 .sku{
							 margin-top:28rpx;
							 font-size: 22rpx;
							 font-weight: 300;
							 color: #666666;
						 }
					 }
					 
					 .proinforight{
						 padding-top:20rpx;
						 font-size: 24rpx;
						 font-weight: 400;
						 color: #666666;
					 }
				 }
			 }
		  }
		  .protal{
			  display:flex;
			  justify-content: flex-end;
			  .proi{
				  view{
					  text-align: center;
				  }
				  .proprice{
					  font-size: 30rpx;
					  font-weight: 400;
					  color: #333333;
					  margin-bottom:14rpx;
				  }
				  .protitle{
					  font-size: 22rpx;
					  font-weight: 300;
					  color: #666666;
				  }
			  }
		  }
	  }
  }
  .evtbottom{
	  background-color:#fff;
	  width:100vw;
	  position:fixed;
	  bottom:0;
	  left:0;
	  .btns{
		  padding:16rpx 0;
		  border-bottom:2rpx solid #ddd;
		  display:flex;
		  width:calc(100vw - 80rpx);
		  box-sizing: border-box;
		  margin:auto;
		  .btn-item{
			  text-align:center;
			  margin-right:30rpx;
			  width: 164rpx;
			  height: 57rpx;
			  line-height: 57rpx;
			  border: 1px solid #BFBFBF;
			  border-radius: 100rpx;
			  font-size: 22rpx;
			  font-weight: 300;
			  color: #666666;
		  }
	  }
	  
	  .eventbom{
		  display:flex;
		  justify-content:space-between;
		  padding-top:30rpx;
		  padding-bottom:15rpx;
		  .chball{
			  width:calc(100% - 200rpx);
			  display:flex;
			  align-items: center;
			  justify-content: space-between;
			  padding-left:40rpx;
			  padding-right:40rpx;
			  .chbcon{
				  display:flex;
				  align-items: center;
				  .qx{
					  font-size: 26rpx;
					  font-weight: 300;
					  color: #B7B6B6;
				  }
			  }
			  .priceall{
				  font-size: 26rpx;
				  font-weight: 300;
				  color: #B7B6B6;
				  .priceallprice{
					  font-size: 30rpx;
					  font-weight: 400;
					  color: #666666;
					  padding-left:10rpx;
				  }
			  }
		  }
		  .btnnext{
			  font-weight:bold;
			  background-color:#F59A23;
			  width: 207rpx;
			  height: 77rpx;
			  line-height: 77rpx;
			  background: #95C51B;
			  box-shadow: 0px 3rpx 5rpx 0px rgba(199, 237, 103, 0.94);
			  border-radius: 39rpx;
			  text-align:center;
			  font-size: 30rpx;
			  font-weight: 400;
			  color: #FFFFFF;
			  margin-right:30rpx;
		  }
	  }
  }
  
  .chb{
  	  width: 30rpx;
  	  height: 30rpx;
  				  border-radius:50%;
  				  border:2rpx solid #ddd;
  				  margin-right:14rpx;
  }
  .chb.active{
  	  width: 30rpx;
  	  height: 30rpx;
  	  background: #f59a23;
  }
</style>
